<template>
  <!-- effect提供dark、light黑亮的背景主题,customized个性化主题;teleported是否挂载到body标签下;placement提示框显示位置 -->
  <el-tooltip effect="customized" :disabled="isShowTooltip" popper-class="tooltipClass" :content="content" :teleported="false"
    placement="top">
    <p :class="['text-ellipsis', className]" @mouseover="onMouseOver(refName)">
      <span :ref="setItemRef" >{{ content || '-' }}</span>
    </p>
  </el-tooltip>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

onMounted(() => {
  const tooltips = document.getElementsByClassName('el-tooltip__popper')
  if (tooltips.length > 0) {
    (tooltips[tooltips.length - 1] as HTMLElement).style.display = 'none'
  }
})

const props = defineProps({
  // 显示的文字内容
  content: {
    type: String,
    default: '',
  },
  // 外层框的样式，在传入的这个类名中设置文字显示的宽度
  className: {
    type: String,
    default: 'w-[full]',
  },
  // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
  refName: {
    type: String,
    default: '',
  },
});

const iframeRefs = ref({}); // 容器对象
const setItemRef = (el, key) => {
  if (el) {
    iframeRefs.value[props.refName] = el; // 保存到容器对象
  }
};
const isShowTooltip = ref(true); // 提示框是否禁用
// 鼠标移入时
const onMouseOver = str => {
  let parentWidth = iframeRefs.value[str].parentNode.offsetWidth;
  let contentWidth = iframeRefs.value[str].offsetWidth;
  // 判断是否开启tooltip功能，超过了就显示，否则不显示
  if (contentWidth > parentWidth) {
    isShowTooltip.value = false;
  } else {
    isShowTooltip.value = true;
  }
};
</script>

<style lang="scss">
.tooltipClass {
  top: -1000px;
  font-size: 16px !important;
  font-family: 'sy' !important;
  color: #414141 !important;
  background: #FFF0BA !important;
  border: 1px solid #FFF0BA !important;
}
</style>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: #FFF0BA;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: #FFF0BA;
  right: 0;
}
</style>

<style lang="scss" scoped>
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
</style>
